<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#alltext {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{
            width:100%;height:1000px;overflow: hidden;display: none;
        }
        #get_lgn_lat{
            margin:50px 50px;
        }
    </style>
 
    
</head>
<body>
    <div id="alltext">
        <div id="get_lgn_lat">
            <button id="lgnlat" onclick="getMap()">点击获取经纬度</button>
            <input type="text" id="div1">
            <!-- <div id="div1"></div> -->
        </div>
    </div>
    <div id="allmap">

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=N0n1jkviyzmZqpEMreK8KeMCo4uXhCLy"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
        
    </div>


    <script type="text/javascript">
        //百度地图API功能
        //创建Map实例
        var map = new BMap.Map('allmap');  
        //初始化地图，设置中心点坐标和地图级别
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point,12);  
        //添加地图类型控件
        var type = new BMap.MapTypeControl();
        map.addControl(type);
        //设置地图先显示的城市，此项是必须设置的
        map.setCurrentCity('北京');  //也可以用城市名设置中心坐标 map.centerAndZoom('上海',15);
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);


        //点击获取经纬度按钮，改变样式，弹出地图，隐藏文本
        function getMap(){
            var cxt = document.getElementById('alltext');
            var map = document.getElementById('allmap');

            cxt.style.display = 'none';
            map.style.display = 'block';
        }


        //单击获取点击的经纬度
        map.addEventListener('click',function(e){
            //alert('当前位置是：'+e.point.lng+','+e.point.lat);
            document.getElementById('div1').value = +e.point.lng+','+e.point.lat;

            var cxt = document.getElementById('alltext');
            var map = document.getElementById('allmap');

            cxt.style.display = 'block';
            map.style.display = 'none';

        })
            

    </script>
</body>
</html>

